<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>部门管理</title>
<script type="text/javascript" src="static/easyui/jquery.min.js"></script>
<script type="text/javascript" src="static/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="static/easyui/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" href="static/easyui/themes/icon.css">
<link rel="stylesheet" href="static/easyui/themes/metro-admin/easyui.css"> 



</head>
<body>
<style type="text/css">
.disable-color{
	user-select: none;
	color: #cdcdcd!important;
}
.depart-button,.depart-button2{
	margin:4px 4px;
	height:25px;
	border:none;
	outline: none;
	cursor:pointer;
	border-radius:3px;
	color:white;
}
.depart-button{
	background:#17AA8D;
}
.depart-button2{
	background:#C9302C;
}
</style>
	<div style="width:90%;height:100%;background:white;padding:20px;margin:20px auto;">
		<table id="tt" style="width:100%;height:440px;margin:10px auto;border:solid 1px;"></table>
	</div>
	
	<script type="text/javascript">
	$('#tt').treegrid({
	    url:'init-depart',
	    idField:'id',
	    treeField:'text',
	    columns:[[
	    	{title:'组织层次',field:'text',width:180,align:'center'},
			{field:'departAddress',title:'组织地点',width:280,align:'center'},
			{field:'code',title:'操作',width:360,align:'center',
				formatter:function bb(value,row,index){
					if(row.parentsid==0){
						return "<input class='depart-button' type='button' onClick='addDepart("+row.id+")' value='新增一级部门' />"+
						"<input class='depart-button' type='button' a='"+row.id+"' b='"+row.text+"' c='"+row.departAddress+"' onClick='editor(this)' value='编辑' />";
					}else{
						return "<input class='depart-button' type='button' onClick='addDepart("+row.id+")' value='新增子部门' />"+
					"<input class='depart-button' type='button' onClick='move("+row.id+")' value='移动' />"+
					"<input class='depart-button' type='button' a='"+row.id+"' b='"+row.text+"' c='"+row.departAddress+"' onClick='editor(this)' value='编辑' />"+
					"<input class='depart-button2' type='button' onClick='deleteDepart("+row.id+")' value='删除' />";
					}
				}}
	    ]]
	});
	
	//新增子部门
	function addDepart(a){
		initpopup();
		$(".xinzeng_text").html("新增组织");
		$("#mainzhe").show();
		$("#addeditor").show();
		$(".departid").val(0);
		$(".parentid").val(a);
	}
	//编辑
	function editor(t){
		var id=$(t).attr("a");//id
		var name=$(t).attr("b");//名称
		var address=$(t).attr("c");//地址
		$(".xinzeng_text").html("编辑");
		$("#mainzhe").show();
		$("#addeditor").show();
		$(".departid").val(id);
		$(".departname").val(name);
		$(".departaddress").val(address);
	}
	//移动
	function move(t){
		initpopup();
		$("#mainzhe").show();
		$("#movemerge").show();
		$(".move_text").html("移动部门");
		$(".merge_text").html("移动到：");
		$(".moveDepartid").val(t);
	}
	
	//删除
	function deleteDepart(t){
		$.ajax({
			url:"delete-depart",
			type:"post",
			data:{"departsid":t},
			success:function(data){
				if(data==1){
					alert("删除成功");
					$('#tt').treegrid('reload');
					$('.depart_list').tree('reload');
				}else if(data==2){
					alert("删除失败，当前组织架构下还有部门或员工");
				}
			}
		});
	}
	//弹窗初始化
	function initpopup(){
		$(".departname").val("");
		$(".departaddress").val("");
		$(".depart_text").val("");
		$(".depart_text").attr({"abbr":0}); 
	}
	
	$(function(){
		//叉掉
		$(".guanbiya").click(function(){
			$("#mainzhe").hide();
			$("#addeditor").hide();
			$("#movemerge").hide();
		});
		//取消
		$("#depart-off").click(function(){
			$("#mainzhe").hide();
			$("#addeditor").hide();
			$("#movemerge").hide();
		});
		//取消
		$("#depart-off2").click(function(){
			$("#mainzhe").hide();
			$("#addeditor").hide();
			$("#movemerge").hide();
		});
		//确定
		$("#depart-on").click(function(){
			var depart_id=$(".departid").val();
			var departName=$(".departname").val().trim();
			var departAddress=$(".departaddress").val();
			var parentsid=$(".parentid").val();
			
			if(departName!=""){
				$.ajax({
					url:"addoreditor-depart",
					type:"post",
					data:{"id":depart_id,"text":departName,"departAddress":departAddress,"parentsid":parentsid},
					success:function(data){
						$("#mainzhe").hide();
						$("#addeditor").hide();
						$('#tt').treegrid('reload');
						$('.depart_list').tree('reload');
						if(data=="1"){
							alert("新增成功");
						}else if(data=="2"){
							alert("修改成功");	
						} 
					}
				});
			}else{
				alert("名称不能为空");
			}
			
		});
		
		
		
		$(".depart_text").click(function(){
			$(".depart_list").show();
		});
		$(".depart_list").tree({
		    url:'init-depart',
		    	onClick: function(node){
		    		    $(".depart_list").hide();
			    		$(".depart_text").val(node.text);
			    		$(".depart_text").attr({"abbr":node.id}); 
		    		
		    	} 
		    	
		});
		
		$("#move-on").click(function(){
			var id=$(".moveDepartid").val();
			var parentsid=$(".depart_text").attr("abbr");
			
			if(parentsid!=0){
				$.ajax({
					url:"update-depart",
					type:"post",
					data:{"id":id,"parentsid":parentsid},
					success:function(data){
						$("#mainzhe").hide();
						$("#movemerge").hide();
						$('#tt').treegrid('reload');
						$('.depart_list').tree('reload');
					}
				});
			}else{
				alert("请选择您要移动到的部门");
			}
			
		});
		
	});
	</script>
	
	
	<!-- 遮罩层 -->
<div id="mainzhe" style="width:100%;height:100%;position:fixed; top:0px;
background: rgba(0, 0, 0, 0.5);text-align:center;left:0;z-index:10;display:none;" >
<!-- 新增或修改 -->
<div id="addeditor" style="margin:20px auto;width:500px;height:220px;background:white;border-radius:3px;display:none;">
	<div style="width:100%;height:30px;">
		<span style="width:fit-content;height:30px;line-height:30px;display:inline-block;float:left;margin-left:20px;font-size:14px;color:gray;" class="xinzeng_text">新增</span>
		<button class="icon-close guanbiya" style="float:right;width:30px;height:30px;cursor:pointer;border:none;outline:none;"></button>
	</div>
	<div style="width:100%;height:145px;border-top:solid 1px #E5E5E5;border-bottom:solid 1px #E5E5E5;">
			<input class="departid" type="hidden"/><input class="parentid" type="hidden"/>
		<p>
			<span style="float:left;margin-left:125px;">名称：</span><input class="departname" type="text" style="display:block;"/>
		</p>
		<p>
			<span style="float:left;margin-left:125px;">地点：</span><textarea class="departaddress" rows="" cols="" id="calend-content" style="display:block;resize:none;"></textarea>
		</p>
	</div>
	<div style="width:100%;height:30px;">
		<div style="width:140px;float:right;margin-top:5px;">
			<a id="depart-off" href="#" class="easyui-linkbutton" data-options="width:60,height:25">关闭</a>
			<a id="depart-on" href="#" class="easyui-linkbutton" data-options="width:60,height:25">确定</a>
		</div>
	</div>
</div>


<!-- 移动或合并 -->
<div id="movemerge" style="margin:20px auto;width:600px;height:125px;background:white;border-radius:3px;display:none;">
	<div style="width:100%;height:30px;">
		<span style="width:fit-content;height:30px;line-height:30px;display:inline-block;float:left;margin-left:20px;font-size:14px;color:gray;" class="move_text"></span>
		<button class="icon-close guanbiya" style="float:right;width:30px;height:30px;cursor:pointer;border:none;outline:none;"></button>
	</div>
	<div style="width:100%;height:58px;border-top:solid 1px #E5E5E5;border-bottom:solid 1px #E5E5E5;">
		<input class="moveDepartid" type="hidden"/>
		<p><span class="merge_text"></span><input class="depart_text" type="text"/><ul class="depart_list" style="overflow:auto;display:none;width:190px;height:200px;background:white;margin-left:40%;padding:10px 10px;box-shadow: 2px 4px 6px 1px grey;
    border-radius: 2px;"></ul></p>
	</div>
	<div style="width:100%;height:30px;">
		<div style="width:140px;float:right;margin-top:5px;">
			<a id="depart-off2" href="#" class="easyui-linkbutton" data-options="width:60,height:25">关闭</a>
			<a id="move-on" href="#" class="easyui-linkbutton" data-options="width:60,height:25">确定</a>
		</div>
	</div>
</div>



</div>
</body>
</html>